<template>
    <template v-for="item in data">
        <el-sub-menu v-if="item.children.length > 0" :index="item.ename" :key="item.ename">
            <template #title>
                <span>
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                </span>
                <span>
                    {{ item.cname }}
                </span>
            </template>
            <SubItem :data="item.children" @function="getBtnStr"></SubItem>
        </el-sub-menu>
        <el-menu-item v-else :index="item.ename" :key="item.id" @click="toView(item)">
            <span>
                <el-icon>
                    <component :is="item.icon" />
                </el-icon>
            </span>
            <span>
                {{ item.cname }}
            </span>
        </el-menu-item>
    </template>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { useRouter } from 'vue-router'
import useSys from '@/store/useSys.js'
let router = useRouter()
let sys = useSys()
let props = defineProps(["data"])
const emits = defineEmits(["function"])

let toView = (item) => {
    sys.handleClickMenu(item);
    emits("function", item)
    router.push(item.path);
}

const getBtnStr = (item) => {
    emits("function", item)
}

</script>

<style lang='scss' scoped></style>
